<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="AJJ">
    <title>小米商城</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/png">
    <link rel="icon" href="images/favicon.ico" type="image/png">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/hover.css">
    <link href="css/datouwang.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/koala.min.1.5.js"></script>
    <script src="js/template.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <style></style>
</head>

<body>
    <!--导航-->
    <nav>
        <div class="center nav">
            <ul class="left">
                <li class="text">小米商城</li>
                <li class="text">MIUI</li>
                <li class="text">米聊</li>
                <li class="text">游戏</li>
                <li class="text">多看阅读</li>
                <li class="text">云服务</li>
                <li class="text">金融</li>
                <li class="text">小米商城移动版</li>
                <li class="text">问题反馈</li>
                <li class="text">Select Region</li>
            </ul>
            <ul class="right">
                <li class="text">登录</li>
                <li class="text">注册</li>
                <li class="text">消息通知</li>
                <li class="text nav_r">
                    <section style="padding-left: 20px;padding-right: 20px;" class="gou"><img src="images/购物车.png" alt="">&nbsp;购物车(0)</section>
                </li>
            </ul>
            <section class="shop">购物车里还没有商品，赶紧选购吧！</section>
        </div>
        <div style="clear: both;"></div>
    </nav>
    <!--轮播图-->
    <header class="yishu">
        <div class="center">
            <div class="left jz">
                <div><img src="images/mi.png" alt=""></div>
                <div class="gif"><img src="images/gif.gif" alt=""></div>
                <div class="nav-list">
                    <ul class="nav-item">
                        <li><a href="#">小米手机</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">平板 · 笔记本</a></li>
                        <li><a href="#">电视</a></li>
                        <li><a href="#">盒子 · 影音</a></li>
                        <li><a href="#">路由器</a></li>
                        <li><a href="#">智能硬件</a></li>
                        <li><a href="#">服务</a></li>
                        <li><a href="#">社区</a></li>
                    </ul>
                </div>
                <section class="section">
                    <input type="text"><img src="images/搜索.png" alt="" class="soso">
                </section>
            </div>
        </div>
        <div class="nav-detail">
            <div class="container center">
                <ul class="dh_over">
                    <div class="box">
                        <img src="images/dan5.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan3.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan4.png" alt="">
                    </div>
                </ul>
                <ul class="dh_over">
                    <div class="box">
                        <img src="images/dan1.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan3.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                </ul>
                <ul class="dh_over">
                    <div class="box">
                        <img src="images/dan1.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan5.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan4.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                </ul>
                <ul class="dh_over">
                    <div class="box">
                        <img src="images/dan8.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan6.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan3.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan4.png" alt="">
                    </div>
                </ul>
                <ul class="dh_over">
                    <div class="box">
                        <img src="images/dan9.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan7.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan3.png" alt="">
                    </div>
                </ul>
                <ul class="dh_over">
                    <div class="box">
                        <img src="images/dan3.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan4.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan4.png" alt="">
                    </div>
                </ul>
                <ul class="dh_over">
                    <div class="box">
                        <img src="images/dan5.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan10.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan2.png" alt="">
                    </div>
                    <div class="box">
                        <img src="images/dan4.png" alt="">
                    </div>
                </ul>
            </div>
        </div>
    </header>
    <!--选购手机-->
    <div>
        <div class="center banner">
            <div id="fsD1" class="focus">
                <div id="D1pic1" class="fPic">
                    <div class="fcon" style="display: none;">
                        <a href="#"><img src="images/lb1.png" style="opacity: 1; "></a>
                    </div>

                    <div class="fcon" style="display: none;">
                        <a href="#"><img src="images/lb2.png" style="opacity: 1; "></a>
                    </div>

                    <div class="fcon" style="display: none;">
                        <a href="#"><img src="images/lb3.png" style="opacity: 1; "></a>
                    </div>

                    <div class="fcon" style="display: none;">
                        <a href="#"><img src="images/lb4.png" style="opacity: 1; "></a>
                    </div>

                    <div class="fcon" style="display: none;">
                        <a href="#"><img src="images/lb5.png" style="opacity: 1; "></a>
                    </div>
                </div>
                <div class="fbg">
                    <div class="D1fBt" id="D1fBt">
                        <a href="javascript:void(0)" hidefocus="true" target="_self" class="current"><i>1</i></a>
                        <a href="javascript:void(0)" hidefocus="true" target="_self" class=""><i>2</i></a>
                        <a href="javascript:void(0)" hidefocus="true" target="_self" class=""><i>3</i></a>
                        <a href="javascript:void(0)" hidefocus="true" target="_self" class=""><i>4</i></a>
                        <a href="javascript:void(0)" hidefocus="true" target="_self" class=""><i>5</i></a>
                    </div>
                </div>
                <span class="prev"></span>
                <span class="next"></span>
            </div>
            <div class="menu">
                <ul class="menu-item">
                    <li><a href="#">手机 电话卡</a></li>
                    <li><a href="#">笔记本 平板</a></li>
                    <li><a href="#">电视 盒子</a></li>
                    <li><a href="#">路由器 智能硬件</a></li>
                    <li><a href="#">移动电源 电池 插线板</a></li>
                    <li><a href="#">耳机 音箱</a></li>
                    <li><a href="#">保护套 贴膜</a></li>
                    <li><a href="#">线材 支架 存储卡</a></li>
                    <li><a href="#">箱包 服饰</a></li>
                    <li><a href="#">米兔 生活周边</a></li>
                </ul>
                <div class="menu-list clearfix">
                    <script id="list" type="text/html">
                        {{each data as d}}
                        <ul>
                            {{each d.list as l}}
                            <li>
                                <a href="#">
                                    <img src="{{l.src}}" alt="">
                                    <span class="name">{{l.name}}</span>
                                </a>
                                <span class="choose">{{l.choose}}</span>
                            </li>
                            {{/each}}
                        </ul>
                        {{/each}}
                    </script>
                </div>
            </div>
        </div>
        <div class="center banner2">
            <div class="fig">
                <ul style="cursor: pointer">
                    <li class="li_r li_x">
                        <figure class="f_1">
                            <img src="images/手机.png" alt="" id="sj">
                            <figcaption>选购手机</figcaption>
                        </figure>
                    </li>
                    <li class="li_r li_x">
                        <figure>
                            <img src="images/团购.png" alt="" id="tg">
                            <figcaption>企业团购</figcaption>
                        </figure>
                    </li>
                    <li class="li_x">
                        <figure>
                            <img src="images/一元抽奖.png" alt="" id="yiyuan">
                            <figcaption>一元活动</figcaption>
                        </figure>
                    </li>
                    <li class="li_r">
                        <figure>
                            <img src="images/移动.png" alt="" id="yidong">
                            <figcaption>小米移动</figcaption>
                        </figure>
                    </li>
                    <li class="li_r">
                        <figure>
                            <img src="images/以旧换新 (1).png" alt="" id="huanxin">
                            <figcaption>以旧换新</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/话费.png" alt="" id="congzhi">
                            <figcaption>话费充值</figcaption>
                        </figure>
                    </li>
                </ul>
            </div>
            <div class="img_b"><img src="images/xiao5.png" alt=""></div>
            <div class="img_b"><img src="images/pingheng.png" alt=""></div>
            <div class="img_b"><img src="images/jiqi.png" alt=""></div>
        </div>
    </div>
    <!--小米明星单品-->
    <div class="center mx q_hover">
        <div class="d_p">
            <h2>小米明星单品</h2>
            <div style="cursor: pointer;">
                <span id="left">&lt;</span><span id="right">&gt;</span>
            </div>
        </div>
        <div class="content">
            <ul class="clearfix">
                <li class="current current1">
                    <div class="box" style="border-top: 1px solid orange;">
                        <img src="images/dan6.png" alt="">
                        <span class="name">小米5s Plus</span>
                        <span class="count">5.7英寸大屏双摄手机，拍照黑科技</span>
                        <span>2299元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid lightgreen;">
                        <img src="images/dan7.png" alt="">
                        <span class="name">小米电视 3s 55英寸</span>
                        <span class="count">人工智能电视，4k大屏新旗舰</span>
                        <span>3999元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid red;">
                        <img src="images/dan8.png" alt="">
                        <span class="name">小米移动电源2</span>
                        <span class="count">双向快充，高密度锂聚合物电芯</span>
                        <span>79元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid blue;">
                        <img src="images/dan9.png" alt="">
                        <span class="name">小米手环 2</span>
                        <span class="count">OLED 显示屏幕，升级计步算法</span>
                        <span>149元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid orange;">
                        <img src="images/dan10.png" alt="">
                        <span class="name">小米净水器 厨下式</span>
                        <span class="count">直出纯净水，隐藏式安装</span>
                        <span>1999元</span>
                    </div>
                </li>
                <li class="current current2">
                    <div class="box" style="border-top: 1px solid lightgreen;">
                        <img src="images/dan1.png" alt="">
                        <span class="name">米家LED只能台灯</span>
                        <span class="count">无可视频闪，亮度色温无级调节</span>
                        <span>169元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid red;">
                        <img src="images/dan2.png" alt="">
                        <span class="name">米家iHealth血压计</span>
                        <span class="count">爸妈上手就会用的只能血压计</span>
                        <span>399元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid blue;">
                        <img src="images/dan3.png" alt="">
                        <span class="name">小米路由器3</span>
                        <span class="count">更快更强，不止四天线</span>
                        <span>149元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid orange;">
                        <img src="images/dan4.png" alt="">
                        <span class="name">小米活塞耳机 清新版</span>
                        <span class="count">组合金音腔 第三代平衡阻尼系统</span>
                        <span>29元</span>
                    </div>
                    <div class="box" style="border-top: 1px solid lightgreen;">
                        <img src="images/dan5.png" alt="">
                        <span class="name">小米体重秤</span>
                        <span class="count">100克 喝水都可以感知的精准</span>
                        <span>99元</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--main-->
    <main>
        <div class="center top pad_top">
            <!--智能硬件-->
            <div>
                <div class="znyj">
                    <h2>智能硬件</h2>
                    <div class="f_right">
                        <span class="all">查看全部</span>
                        <span class="gt">&gt;</span>
                    </div>
                </div>
                <div class="yj"><img src="images/zhineng1.png" alt=""></div>
                <div class="dw">
                    <ul class="content">
                        <li>
                            <div class="box">
                                <img src="images/zhineng2.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                            </div>
                            <div class="box">
                                <img src="images/zhineng3.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                            </div>
                            <div class="box">
                                <img src="images/zhineng4.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                            </div>
                            <div class="box">
                                <img src="images/zhineng5.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                            </div>
                        </li>
                        <li class="li_2">
                            <div class="box">
                                <img src="images/zhineng6.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                            </div>
                            <div class="box">
                                <img src="images/zhineng7.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                            </div>
                            <div class="box">
                                <img src="images/zhineng8.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                            </div>
                            <div class="box">
                                <img src="images/zhineng9.png" alt="">
                                <span class="name">小米活塞耳机 清新版</span>
                                <span class="count">组合金音腔 第三代平衡阻尼系统</span>
                                <span>29元</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--搭配-->
            <div class="dp_top main_ul">
                <div>
                    <h2>搭配</h2>
                    <div class="f_right">
                        <ul>
                            <li>热门</li>
                            <li>耳机音响</li>
                            <li>电源</li>
                            <li>电池储存卡</li>
                        </ul>
                    </div>
                </div>
                <div class="yj">
                    <img src="images/dapei1.png" alt="">
                    <img src="images/dapei2.png" alt="" class="dapei_top">
                </div>
                <div class="dw">
                    <ul class="content hover">
                        <li>
                            <div class="box ddd">
                                <img src="images/re1.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>

                            <div class="box ddd">
                                <img src="images/re2.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>

                            <div class="box ddd">
                                <img src="images/erji3.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box ddd">
                                <img src="images/re4.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                        </li>
                        <li class="li_2">
                            <div class="box">
                                <img src="images/erji6.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/re6.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/re7.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/re8.png" alt="">
                                <span class="name">小米活塞耳机 清新版</span>
                                <span class="count">组合金音腔 第三代平衡阻尼系统</span>
                                <span>29元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--配件-->
            <div class="dp_top main_ul">
                <div>
                    <h2>配件</h2>
                    <div class="f_right">
                        <ul>
                            <li>热门</li>
                            <li>保护套</li>
                            <li>贴膜</li>
                            <li>其他配件</li>
                        </ul>
                    </div>
                </div>
                <div class="yj">
                    <img src="images/pj1.png" alt="">
                    <img src="images/pj2.png" alt="" class="dapei_top">
                </div>
                <div class="dw">
                    <ul class="content hover">
                        <li>
                            <div class="box">
                                <img src="images/pj11.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/pj14.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/pj10.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/pj25.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                        </li>
                        <li class="li_2">
                            <div class="box">
                                <img src="images/pj19.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/pj17.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/pj20.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/re8.png" alt="">
                                <span class="name">小米活塞耳机 清新版</span>
                                <span class="count">组合金音腔 第三代平衡阻尼系统</span>
                                <span>29元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--周边-->
            <div class="dp_top main_ul">
                <div>
                    <h2>周边</h2>
                    <div class="f_right">
                        <ul>
                            <li>热门</li>
                            <li>服装</li>
                            <li>米兔</li>
                            <li>生活周边</li>
                            <li>箱包</li>
                        </ul>
                    </div>
                </div>
                <div class="yj">
                    <img src="images/zhoubian1.png" alt="">
                    <img src="images/zhoubian2.png" alt="" class="dapei_top">
                </div>
                <div class="dw">
                    <ul class="content hover">
                        <li>
                            <div class="box">
                                <img src="images/zhoubian3.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/zhoubian4.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/zhoubian5.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/zhoubian6.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                        </li>
                        <li class="li_2">
                            <div class="box">
                                <img src="images/zhoubian7.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/zhoubian8.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/zhoubian9.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                                <div class="block">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                            <div class="box">
                                <img src="images/zhoubian10.png" alt="">
                                <span class="name">小米活塞耳机 清新版</span>
                                <span class="count">组合金音腔 第三代平衡阻尼系统</span>
                                <span>29元</span>
                                <div class="block ok">
                                    <span>棒到不能在棒，哈哈，一直以来就是最爱小米，果然...</span><span>来自于 jj 的评价</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--为你推荐-->
            <div class="dp_top tj">
                <div class="d_p">
                    <h2>为你推荐</h2>
                    <div style="cursor: pointer;">
                        <span id="left">&lt;</span>
                        <span id="right">&gt;</span>
                    </div>
                </div>
                <div class="tj_dw">
                    <ul class="tj_ul">
                        <li class="tj_li curr1">
                            <div class="box">
                                <img src="images/tuijian1.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian2.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian3.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian4.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian5.png" alt="">
                                <span class="name">小米活塞耳机 清新版</span>
                                <span class="count">组合金音腔 第三代平衡阻尼系统</span>
                                <span>29元</span>
                            </div>
                        </li>
                        <li class="tj_li tj_li2 curr2">
                            <div class="box">
                                <img src="images/tuijian6.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian7.png" alt="">
                                <span class="name">米家LED只能台灯</span>
                                <span class="count">无可视频闪，亮度色温无级调节</span>
                                <span>169元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian8.png" alt="">
                                <span class="name">米家iHealth血压计</span>
                                <span class="count">爸妈上手就会用的只能血压计</span>
                                <span>399元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian9.png" alt="">
                                <span class="name">小米路由器3</span>
                                <span class="count">更快更强，不止四天线</span>
                                <span>149元</span>
                            </div>
                            <div class="box">
                                <img src="images/tuijian10.png" alt="">
                                <span class="name">小米活塞耳机 清新版</span>
                                <span class="count">组合金音腔 第三代平衡阻尼系统</span>
                                <span>29元</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--产品热评-->
            <div class="dp_top r_p">
                <div class="d_p">
                    <h2>热评产品</h2>
                </div>
                <div class="tj_dw">
                    <ul class="tj_ul">
                        <li class="tj_li">
                            <div class="box">
                                <img src="images/reping1.png" alt="">
                                <span class="name">很小巧 像不喜欢戴活塞的人可以试试这种~很舒服包装还是一如既往的间接哟啊哈斯有盒子就好了--@=</span>
                                <span class="count">来自于 鹤秀 的评价</span>
                                <span class="m">小米胶囊我耳机 &nbsp;| &nbsp;</span><span>69元</span>
                            </div>
                            <div class="box">
                                <img src="images/reping2.png" alt="">
                                <span class="name">先五分好评再说，米家LED只能台灯，或转头的台灯并且很好看，喜欢喜欢！！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <span class="count">来自于 随风 的评价</span>
                                <span class="m">米家台灯 &nbsp;| &nbsp;</span><span>169元</span>
                            </div>
                            <div class="box">
                                <img src="images/reping3.png" alt="">
                                <span class="name">包装很让人感动，样式也很可爱，做出的饭全家都很爱吃，超爱五星！手机控值还是不太熟练，只要是没有连接...</span>
                                <span class="count">来自于 HZG 的评价</span>
                                <span class="m">米家压力IH电饭煲 &nbsp;| &nbsp;</span><span>699元</span>
                            </div>
                            <div class="box">
                                <img src="images/reping4.png" alt="">
                                <span class="name">好用好用好用，重要的事情说三遍，快啦买吧!!好用好用好用，重要的事情说三遍，快啦买吧!!</span>
                                <span class="count">来自于 秘密 的评价</span>
                                <span class="m">米家水槽 &nbsp;| &nbsp;</span><span>999元</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--内容-->
            <div class="dp_top r_p n_r">
                <div class="d_p">
                    <h2>内容</h2>
                </div>
                <div class="tj_dw">
                    <ul class="tj_ul">
                        <li class="tj_li">
                            <div class="box" style="border-top: 1px solid orange;">
                                <span class="oran first">图书</span>
                                <span class="r_h2">哈利·波特与被诅咒的孩子</span>
                                <span class="count">"哈利·波特第八个故事中文版震撼来袭!特别彩排剧本!"</span>
                                <span class="money">29.37元</span>
                                <img src="images/a.png" alt="">
                            </div>
                            <div class="box" style="border-top: 1px solid lightgreen;">
                                <span class="gree first">MIUI主题</span>
                                <span class="r_h2">小米5尊金版</span>
                                <span class="count">小米5c动态尊黑主题，首发上线!会动的默认壁纸</span>
                                <span class="money">9米币</span>
                                <img src="images/b.png" alt="">
                            </div>
                            <div class="box" style="border-top: 1px solid red;">
                                <span class="red first">游戏</span>
                                <span class="r_h2">米柚手游模拟器</span>
                                <span class="count">在电脑上玩遍小米所有的手游</span>
                                <span class="money">免费</span>
                                <img src="images/c.png" alt="">
                            </div>
                            <div class="box" style="border-top: 1px solid blue;">
                                <span class="blue first">应用</span>
                                <span class="r_h2">2017金米奖</span>
                                <span class="count">最优秀的应用和游戏</span>
                                <img src="images/d.png" alt="" class="l_img">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--视频-->
            <div class="dp_top r_p s_p">
                <div class="znyj">
                    <h2>视频</h2>
                    <div class="f_right">
                        <span class="all">查看全部</span>
                        <span class="gt">&gt;</span>
                    </div>
                </div>
                <div class="tj_dw">
                    <ul class="tj_ul">
                        <li class="tj_li">
                            <div class="box">
                                <img src="images/shipin1.png" alt="">
                                <span class="name">红米Note 4X 环岛挑战</span>
                                <span class="count">看看我们关于超长续航的疯狂想法</span>
                                <section>♪</section>
                            </div>
                            <div class="box">
                                <img src="images/shipin2.png" alt="">
                                <span class="name">小米之家发生了一件怪事</span>
                                <span class="count">World Order星机械人首要访问星球</span>
                                <section>♪</section>
                            </div>
                            <div class="box">
                                <img src="images/shipin3.png" alt="">
                                <span class="name">小米MIX概念守家背后的故事</span>
                                <span class="count">雷总亲自讲述小米MIX的诞生</span>
                                <section>♪</section>
                            </div>
                            <div class="box">
                                <img src="images/shipin4.png" alt="">
                                <span class="name">一面科技，一面艺术</span>
                                <span class="count">梁朝伟讲述双面人生</span>
                                <section>♪</section>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <br><br>
        </div>
    </main>
    <!--footer-->
    <footer class="center">
        <!--维修-->
        <div class="wx">
            <ul>
                <li class="has"><img src="images/工具.png" alt=""><a href="#">预约维修服务</a></li>
                <li class="has"><img src="images/以旧换新.png" alt=""><a href="#">七天无理由退款</a></li>
                <li class="has"><img src="images/30退换货.png" alt=""><a href="#">30天免费退货</a></li>
                <li class="has"><img src="images/包邮.png" alt=""><a href="#">满150包邮</a></li>
                <li><img src="images/售后中心.png" alt=""><a href="#">520余家售后网点</a></li>
            </ul>
        </div>
        <div class="help">
            <ul>
                <li>
                    <span>帮助中心</span>
                    <a href="#">账户管理</a>
                    <a href="#">购物指南</a>
                    <a href="#">订单操作</a>
                </li>
                <li>
                    <span>服务支持</span>
                    <a href="#">售后政策</a>
                    <a href="#">自助服务</a>
                    <a href="#">先关下载</a>
                </li>
                <li>
                    <span>线下门店</span>
                    <a href="#">小米之家</a>
                    <a href="#">服务网点</a>
                    <a href="#">零售网点</a>
                </li>
                <li>
                    <span>关于小米</span>
                    <a href="#">了解小米</a>
                    <a href="#">加入小米</a>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <span>关于我们</span>
                    <a href="#">新浪微博</a>
                    <a href="#">小米部落</a>
                    <a href="#">官方微信</a>
                </li>
                <li>
                    <span>特色服务</span>
                    <a href="#">F码通道</a>
                    <a href="#">礼物码</a>
                    <a href="#">防伪查询</a>
                </li>
            </ul>
            <ul class="last_ul">
                <li class="last_li">
                    <span>400-100-5678</span>
                    <span class="span2">周一至周日 8:00-18:00</span>
                    <span class="span3">(仅收市话费)</span>
                    <span class="h_24">24小时在线客服</span>
                </li>
            </ul>
        </div>
    </footer>
    <div class="footer_bg">
        <div class="center">
            <div class="logo">
                <img src="images/mi.png" alt="">
            </div>
            <div class="ul">
                <ul class="orang pleft">
                    <li>小米商城 |</li>
                    <li> MIUI |</li>
                    <li> 米聊 |</li>
                    <li> 多看书城 |</li>
                    <li> 小米路由器 |</li>
                    <li> 视频电话 |</li>
                    <li> 企业团购 |</li>
                    <li> 小米天猫店 |</li>
                    <li> 小米淘宝直营店 |</li>
                    <li> 小米联盟 |</li>
                    <li> 小米移动 |</li>
                    <li> SElect Region </li>
                </ul>
                <ul class="font_color">
                    <li>©mi.com京ICP证110507号 </li>
                    <li class="orangd">京ICP备10046444号 </li>
                    <li class="orangd">京公网安备11010802020134号 </li>
                    <li class="orangd">京网文[2014]0059-0009号 </li>
                </ul>
                <ul class="font_color">
                    违法和不良信息举报电话：185-0130-1238，本网站所列数据。除特殊说明，所有数据均出自自我司实验室测试
                </ul>
            </div>
            <div class="img">
                <img src="images/logo2.png" alt="">
                <img src="images/logo3.png" alt="">
                <img src="images/logo4.png" alt="">
                <img src="images/logo5.png" alt="">
            </div>
        </div>
        <section style="font-family: '楷体'">
            探索黑科技，小米为发烧而生！
        </section>
    </div>
</body>
<html>
<script type="text/javascript">
    Qfast.add('widgets', { path: "js/terminator2.2.min.js", type: "js", requires: ['fx'] });
    Qfast(false, 'widgets', function () {
        K.tabs({
            id: 'fsD1',   //焦点图包裹id  
            conId: "D1pic1",  //** 大图域包裹id  
            tabId: "D1fBt",
            tabTn: "a",
            conCn: '.fcon', //** 大图域配置class       
            auto: 1,   //自动播放 1或0
            effect: 'fade',   //效果配置
            eType: 'click', //** 鼠标事件
            pageBt: true,//是否有按钮切换页码
            bns: ['.prev', '.next'],//** 前后按钮配置class                          
            interval: 3000  //** 停顿时间  
        })
    })

</script>
<script>
    $('.hover .box').hover(function () {
        $(this).find('.block').stop().animate({ bottom: 34 }, 200);
    }, function () {
        $(this).find('.block').stop().animate({ bottom: -44 }, 200);
    })
    $('.znyj .f_right').hover(function () {
        $('.all').css('color', 'orangered');
        $('.gt').css('background-color', 'orangered');
    }, function () {
        $('.all').css('color', 'black');
        $('.gt').css('background-color', '#ccc');
    })

    $('.mx #right').click(function () {
        $('.current1').stop().animate({ left: -1224 }, 600);
        $('.current2').stop().animate({ left: 0 }, 600);
    })
    $('.mx #left').click(function () {
        $('.current1').stop().animate({ left: 0 }, 600);
        $('.current2').stop().animate({ left: 1224 }, 600);
    })

    $('.tj #right').click(function () {
        $('.curr1').stop().animate({ left: -1224 }, 600);
        $('.curr2').stop().animate({ left: 0 }, 600);
    })
    $('.tj #left').click(function () {
        $('.curr1').stop().animate({ left: 0 }, 600);
        $('.curr2').stop().animate({ left: 1224 }, 600);
    })
    $('.tj #left').hover(function () {
        $(this).css('color', 'orangered');
    }, function () {
        $(this).css('color', '#666');
    })
    $('.tj #right').hover(function () {
        $(this).css('color', 'orangered');
    }, function () {
        $(this).css('color', '#666');
    })

    $('.nav').mouseleave(function () {
        $('.nav .gou').css({ 'background-color': '#333', 'color': '#b0b0b0' });
        $('.shop').stop().animate({ width: 300, height: 0, opacity: 0 }, 300).css('display', 'none');
    })
    $('.nav_r').mouseenter(function () {
        $('.nav .gou').css({ 'background-color': 'white', 'color': 'orange' });
        $('.shop').stop().animate({ width: 300, height: 98, opacity: 1 }, 300).css('display', 'block');
    })
    $('.shop').mouseleave(function () {
        $('.nav .gou').css({ 'background-color': '#333', 'color': '#b0b0b0' });
        $('.shop').stop().animate({ width: 300, height: 0, opacity: 0 }, 300).css('display', 'none');
    })
    // 导航栏
    $('.yishu .nav-item li').each(function (index) {
        $(this).mouseenter(function () {
            if (index < $('.yishu .nav-item li').length - 2) {
                $('.nav-detail').stop().slideDown(400);
                $('.nav-detail ul').eq(index).show().siblings().hide();
            } else {
                $('.yishu .nav-detail').stop().slideUp(400).hide(400);
            }
        });
    });
    $('.yishu .nav-list').mouseleave(function () {
        $('.yishu .nav-detail').stop().slideUp(400).hide(400);
    });


    // 菜单

    // 手机电话卡
    var phone_data =
        [
            {
                list: [
                    { src: 'images/small/3.png', name: '小米Note 2', choose: '选购' },
                    { src: 'images/small/9.png', name: '小米MIX', choose: '选购' },
                    { src: 'images/small/8.png', name: '小米MIX', choose: '选购' },
                    { src: 'images/small/7.png', name: '小米MIX', choose: '选购' },
                ]
            },
            {
                list: [
                    { src: 'images/small/9.png', name: '小米Note 2', choose: '选购' },
                    { src: 'images/small/8.png', name: '小米MIX', choose: '选购' },
                    { src: 'images/small/7.png', name: '小米MIX', choose: '选购' },
                    { src: 'images/small/6.png', name: '小米MIX' },
                    { src: 'images/small/5.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/7.png', name: '小米MIX', choose: '选购' },
                ]
            },
        ];
    // 笔记本平板
    var nb_data =
        [
            {
                list: [
                    { src: 'images/small/5.png', name: '小米手机5c', choose: '选购' },
                    { src: 'images/small/2.png', name: '小米Note 2', choose: '选购' },
                    { src: 'images/small/8.png', name: '小米MIX', choose: '选购' },
                    { src: 'images/small/7.png', name: '小米MIX', choose: '选购' },
                    { src: 'images/small/6.png', name: '小米MIX', choose: '选购' },
                    { src: 'images/small/5.png', name: '小米MIX', choose: '选购' },
                ]
            }
        ];
    // 电视盒子
    var tv_data =
        [
            {
                list: [
                    { src: 'images/small/5.png', name: '小米手机5c' },
                    { src: 'images/small/2.png', name: '小米Note 2' },
                    { src: 'images/small/8.png', name: '小米MIX' },
                    { src: 'images/small/7.png', name: '小米MIX' },
                    { src: 'images/small/6.png', name: '小米MIX' },
                    { src: 'images/small/5.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/4.png', name: '小米手机5c' },
                    { src: 'images/small/10.png', name: '小米Note 2' },
                    { src: 'images/small/9.png', name: '小米MIX' },
                    { src: 'images/small/8.png', name: '小米MIX' },
                    { src: 'images/small/7.png', name: '小米MIX' },
                    { src: 'images/small/7.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/6.png', name: '小米手机5c' },
                    { src: 'images/small/5.png', name: '小米手机5c' },
                    { src: 'images/small/4.png', name: '小米手机5c' },
                ]
            },
        ];
    // 路由器智能硬件
    var life_data =
        [
            {
                list: [
                    { src: 'images/small/3.png', name: '小米手机5c' },
                    { src: 'images/small/2.png', name: '小米Note 2' },
                    { src: 'images/small/1.png', name: '小米MIX' },
                    { src: 'images/small/1.png', name: '小米MIX' },
                    { src: 'images/small/2.png', name: '小米MIX' },
                    { src: 'images/small/3.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/4.png', name: '小米手机5c' },
                    { src: 'images/small/5.png', name: '小米Note 2' },
                    { src: 'images/small/6.png', name: '小米MIX' },
                    { src: 'images/small/7.png', name: '小米MIX' },
                    { src: 'images/small/8.png', name: '小米MIX' },
                    { src: 'images/small/9.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/10.png', name: '小米手机5c' },
                    { src: 'images/small/15.png', name: '小米手机5c' },
                    { src: 'images/small/14.png', name: '小米手机5c' },
                    { src: 'images/small/13.png', name: '小米手机5c' },
                    { src: 'images/small/12.png', name: '小米手机5c' },
                    { src: 'images/small/12.png', name: '小米手机5c' },
                ]
            },
            {
                list: [
                    { src: 'images/small/10.png', name: '小米手机5c' },
                    { src: 'images/small/13.png', name: '小米手机5c' },
                    { src: 'images/small/7.png', name: '小米手机5c' },
                    { src: 'images/small/6.png', name: '小米手机5c' },
                    { src: 'images/small/5.png', name: '小米手机5c' },
                    { src: 'images/small/4.png', name: '小米手机5c' },
                ]
            },
        ];
    // 移动电源
    var power_data =
        [
            {
                list: [
                    { src: 'images/small/7.png', name: '小米手机5c' },
                    { src: 'images/small/6.png', name: '小米Note 2' },
                    { src: 'images/small/11.png', name: '小米MIX' },
                    { src: 'images/small/13.png', name: '小米MIX' },
                    { src: 'images/small/1.png', name: '小米MIX' },
                    { src: 'images/small/14.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/7.png', name: '小米手机5c' },
                ]
            },
        ];
    // 耳机
    var earphone_data =
        [
            {
                list: [
                    { src: 'images/small/13.png', name: '小米手机5c' },
                    { src: 'images/small/8.png', name: '小米Note 2' },
                    { src: 'images/small/2.png', name: '小米MIX' },
                    { src: 'images/small/6.png', name: '小米MIX' },
                    { src: 'images/small/5.png', name: '小米MIX' },
                    { src: 'images/small/4.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/14.png', name: '小米手机5c' },
                    { src: 'images/small/1.png', name: '小米Note 2' },
                    { src: 'images/small/2.png', name: '小米MIX' },
                    { src: 'images/small/3.png', name: '小米MIX' },
                    { src: 'images/small/4.png', name: '小米MIX' },
                    { src: 'images/small/4.png', name: '小米MIX' },
                ]
            },
            {
                list: [
                    { src: 'images/small/5.png', name: '小米手机5c' },
                    { src: 'images/small/6.png', name: '小米手机5c' },
                    { src: 'images/small/7.png', name: '小米手机5c' },
                    { src: 'images/small/8.png', name: '小米手机5c' },
                    { src: 'images/small/9.png', name: '小米手机5c' },
                ]
            },
        ];

    // 保护套
    var protect_data =
        [
            {
                list: [
                    { src: 'images/small/10.png', name: '小米手机5c' },
                    { src: 'images/small/11.png', name: '小米Note 2' },
                ]
            }
        ];
    // 线材
    var line_data =
        [
            {
                list: [
                    { src: 'images/small/12.png', name: '小米手机5c' },
                    { src: 'images/small/13.png', name: '小米Note 2' },
                    { src: 'images/small/14.png', name: '小米手机5c' },
                    { src: 'images/small/15.png', name: '小米Note 2' },
                ]
            }
        ];
    // 箱包
    var bag_data =
        [
            {
                list: [
                    { src: 'images/small/1.png', name: '小米手机5c' },
                    { src: 'images/small/2.png', name: '小米Note 2' },
                    { src: 'images/small/3.png', name: '小米手机5c' },
                ]
            }
        ];
    // 米兔
    var mi_data =
        [
            {
                list: [
                    { src: 'images/small/1.png', name: '小米手机5c' },
                    { src: 'images/small/2.png', name: '小米Note 2' },
                    { src: 'images/small/3.png', name: '小米手机5c' },
                    { src: 'images/small/4.png', name: '小米Note 2' },
                    { src: 'images/small/5.png', name: '小米手机5c' },
                ]
            }
        ];

    var dataArray = [phone_data, nb_data, tv_data, life_data, power_data, earphone_data, protect_data, line_data, bag_data, mi_data];

    $('.menu-item li').each(function (index) {
        $(this).mouseenter(function () {
            var data = dataArray[index];
            console.dir({ data });
            var html = template('list', { data });
            // console.log(html)
            $('.menu-list').show().html(html);
            // 根据列表的多少，改变.menu的宽度
            // $('.menu').width(234 + data.length * 265 + 2);
            $('.menu-list').width(234 + data.length * 150);

            // 判断是否显示选购(选购的内容为空时，将其隐藏)
            $('.menu-list li').find('.choose:empty').hide();
            // 处理背景颜色
            $('.menu-item li a').eq(index).css('background-color', '#ff6700')
                .parent().siblings().find('a').css('background-color', 'transparent');
        });
        $('.menu').mouseleave(function () {
            $('.menu-list').hide().html('');
            $('.menu').width(234);
            $('.menu-item li').css('background-color', 'transparent');
        });
    })

</script>